<template>
  <div class="table-wrapper">
    <el-table
        :data="data"
        row-key="id"
        :fit="true"
        @sort-change="$emit('sort-change', $event)"
        @expand-change="handleExpandChange"
    >
      <el-table-column type="expand" fixed>
        <template #default="props">
          <chapter-table
              :data="props.row.children"
              @sort-change="$emit('sort-change', $event)"
          />
        </template>
      </el-table-column>
      <template v-for="(col, index) in columns" :key="col.prop">
        <el-table-column
            v-bind="col"
            :fixed="index < 1"
        >
          <template #default="scope" v-if="col.prop === 'studyPrograss'">
            <progress-bar
                :percentage="removePercentageSign(scope.row.studyProgress)"
                :status="removePercentageSign(scope.row.studyProgress) >= 100 ? 'success' : ''"
            />
          </template>
          <template #default="scope" v-else-if="col.prop === 'status'">
            <status-tag :status="scope.row.status"/>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script setup>
import {courseTableColumns} from '../const'
import ChapterTable from './ChapterTable.vue'
import ProgressBar from './ProgressBar.vue'
import StatusTag from './StatusTag.vue'

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  columns: {
    type: Array,
    default: () => courseTableColumns
  }
})

const emit = defineEmits(['sort-change', 'expand-change'])

const handleExpandChange = (row, expanded) => {
  emit('expand-change', row, expanded)
}
const removePercentageSign = (inputString) => {
  console.log(inputString)
  if (typeof inputString !== 'string') {
    throw new Error('Input must be a string');
  }
  return Number(inputString.replace(/%/g, ''))
}
</script>

<style scoped>
.table-wrapper {
  margin: 16px 0 0 50px;
}

:deep(.el-table) {
  background-color: transparent;

  .el-table__row:hover > td {
    background-color: #F8F9FB !important;
  }

  .el-table__header-wrapper th {
    background-color: #F8F9FB !important;
    color: #606266;
    font-weight: 500;
    height: 45px;
    border-bottom: 1px solid #EBEEF5;
  }

  .el-table__row {
    height: 40px;
    border-bottom: 1px solid #EBEEF5;
  }
}

/* 添加左侧树形连接线 */
.table-wrapper::before {
  content: '';
  position: absolute;
  left: 25px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #E4E7ED;
}

/* 隐藏水平滚动条 */
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden !important;
}

/* 调整表格布局 */
:deep(.el-table__cell) {
  white-space: nowrap;
  border: none !important;
}

:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper) {
  width: 100% !important;
  overflow: hidden !important;
}

:deep(.el-table__inner-wrapper) {
  flex: 1;
}

:deep(.el-table__body),
:deep(.el-table__header) {
  width: 100% !important;
}

/* 移除表格边框 */
:deep(.el-table::before),
:deep(.el-table::after) {
  display: none;
}

:deep(.el-table__fixed-header-wrapper),
:deep(.el-table__header-wrapper) {
  background-color: #F8F9FB;
}

:deep(.el-table__header-row) {
  height: 45px;
}
</style>
